<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"tallgy.gitee.io","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>
<meta name="description" content="块环境上下文（BFC）12https:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;Guide&#x2F;CSS&#x2F;Block_formatting_contexthttps:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;CSS_Flow_Layout&#x2F;Intro_to_formatting_contexts    什么是BFC 1块格式">
<meta property="og:type" content="article">
<meta property="og:title" content="块环境上下文(BFC)">
<meta property="og:url" content="http://tallgy.gitee.io/2021/10/21/HTML/%E5%9D%97%E7%8E%AF%E5%A2%83%E4%B8%8A%E4%B8%8B%E6%96%87/index.html">
<meta property="og:site_name" content="tallgy&#39;s blog">
<meta property="og:description" content="块环境上下文（BFC）12https:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;Guide&#x2F;CSS&#x2F;Block_formatting_contexthttps:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;CSS_Flow_Layout&#x2F;Intro_to_formatting_contexts    什么是BFC 1块格式">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://tallgy.gitee.io/.io//image-20211022110540794.png">
<meta property="og:image" content="http://tallgy.gitee.io/.io//image-20211022161542404.png">
<meta property="article:published_time" content="2021-10-21T14:49:56.000Z">
<meta property="article:modified_time" content="2023-06-25T08:57:29.338Z">
<meta property="article:author" content="tallgy">
<meta property="article:tag" content="HTML">
<meta property="article:tag" content="BFC">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://tallgy.gitee.io/.io//image-20211022110540794.png">


<link rel="canonical" href="http://tallgy.gitee.io/2021/10/21/HTML/%E5%9D%97%E7%8E%AF%E5%A2%83%E4%B8%8A%E4%B8%8B%E6%96%87/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://tallgy.gitee.io/2021/10/21/HTML/%E5%9D%97%E7%8E%AF%E5%A2%83%E4%B8%8A%E4%B8%8B%E6%96%87/","path":"2021/10/21/HTML/块环境上下文/","title":"块环境上下文(BFC)"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>块环境上下文(BFC) | tallgy's blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">tallgy's blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9D%97%E7%8E%AF%E5%A2%83%E4%B8%8A%E4%B8%8B%E6%96%87%EF%BC%88BFC%EF%BC%89"><span class="nav-number">1.</span> <span class="nav-text">块环境上下文（BFC）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E6%96%B9%E5%BC%8F"><span class="nav-number">1.1.</span> <span class="nav-text">创建方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84-BFC-%E6%96%B9%E5%BC%8F"><span class="nav-number">1.2.</span> <span class="nav-text">常用的 BFC 方式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6"><span class="nav-number">1.2.1.</span> <span class="nav-text">解决外边距合并</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="nav-number">1.2.2.</span> <span class="nav-text">清除浮动</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80"><span class="nav-number">1.2.3.</span> <span class="nav-text">两栏布局</span></a></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">tallgy</p>
  <div class="site-description" itemprop="description">只是一个知识的搬运工</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">107</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">32</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">74</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/10/21/HTML/%E5%9D%97%E7%8E%AF%E5%A2%83%E4%B8%8A%E4%B8%8B%E6%96%87/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          块环境上下文(BFC)
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-10-21 22:49:56" itemprop="dateCreated datePublished" datetime="2021-10-21T22:49:56+08:00">2021-10-21</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/HTML/" itemprop="url" rel="index"><span itemprop="name">HTML</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="块环境上下文（BFC）"><a href="#块环境上下文（BFC）" class="headerlink" title="块环境上下文（BFC）"></a>块环境上下文（BFC）</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context</span><br><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts</span><br></pre></td></tr></table></figure>



<p><strong>什么是BFC</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。</span><br></pre></td></tr></table></figure>

<p><strong>有什么作用</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">解决外边距合并：</span><br><span class="line">	首先，外边距合并的原因是因为在同一个BFC下的结果，所以我们可以针对不同的</span><br><span class="line">	对于不同的BFC也不会造成外边距和合并。所以可以使用BFC来解决外边距合并的问题。</span><br><span class="line">清除浮动：</span><br><span class="line">	可以清除浮动，对于清除浮动，只能清除同一BFC的浮动。</span><br><span class="line">自适应两栏布局：</span><br><span class="line">	可以做一个横向的两栏布局，一个宽度固定作为一个BFC，另一个做成另一个BFC。</span><br></pre></td></tr></table></figure>



<h2 id="创建方式"><a href="#创建方式" class="headerlink" title="创建方式"></a>创建方式</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">根元素（&lt;html&gt;）</span><br><span class="line">浮动元素（元素的 float 不是 none）</span><br><span class="line">绝对定位元素（元素的 position 为 absolute 或 fixed）</span><br><span class="line">行内块元素（元素的 display 为 inline-block）</span><br><span class="line">表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）</span><br><span class="line">表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）</span><br><span class="line">匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）</span><br><span class="line">overflow 计算值(Computed)不为 visible 的块元素</span><br><span class="line">display 值为 flow-root 的元素</span><br><span class="line">contain 值为 layout、content 或 paint 的元素</span><br><span class="line">弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）</span><br><span class="line">网格元素（display 为 grid 或 inline-grid 元素的直接子元素）</span><br><span class="line">多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）</span><br><span class="line">column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。</span><br></pre></td></tr></table></figure>



<h2 id="常用的-BFC-方式"><a href="#常用的-BFC-方式" class="headerlink" title="常用的 BFC 方式"></a>常用的 BFC 方式</h2><p>HTML根元素</p>
<p>浮动， 不能为 <code>none</code></p>
<p>绝对定位， 包括 <code>absolute </code>和 <code>fixed</code></p>
<p>表格    包括，表格布局和表格元素</p>
<p>overflow    计算值不为 <code>visible</code> ，这里说的是计算值</p>
<p>弹性布局    <code>flex</code></p>
<p>网格布局    <code>grid</code></p>
<p>​        <code>display: flow-root</code>，一个新的 <code>display</code> 属性的值，它可以创建无副作用的 BFC。在父级块中使用 <code>display: flow-root</code> 可以创建新的 BFC。</p>
<p>​        给 <code>&lt;div&gt;</code> <code>display: flow-root</code> 属性后，<code>&lt;div&gt;</code> 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。</p>
<h3 id="解决外边距合并"><a href="#解决外边距合并" class="headerlink" title="解决外边距合并"></a>解决外边距合并</h3><p>这个我前面有写有，并且这个只需要不处于同一个BFC就可以有效果。所以这里不做过多说明，就简单的贴一个代码就行。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=&quot;zh&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">  &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">  &lt;style&gt;</span><br><span class="line">    .f &#123;</span><br><span class="line">      display: inline-block;</span><br><span class="line">      background-color: red;</span><br><span class="line">      height: 90px;</span><br><span class="line">      width: 100px;</span><br><span class="line">      margin-bottom: 20px;</span><br><span class="line">    &#125;</span><br><span class="line">    .c &#123;</span><br><span class="line">      margin-top: 20px;</span><br><span class="line">      height: 100px;</span><br><span class="line">      width: 200px;</span><br><span class="line">      background-color: blue;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/style&gt;</span><br><span class="line"></span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div class=&quot;f&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;div class=&quot;c&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>



<h3 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h3><p>​        从下面的例子可以看出。</p>
<p>​        从结果可以看到，当一个元素创建了一个BFC之后，其内部的所有元素都会影响。对于根元素f（red），子元素c（blue），子子元素cc（black）。red的高度被其black所影响。而因为blue没有形成一个BFC，所以虽然black属于blue的子元素，但是blue没有将高度撑开为 black 的高度。</p>
<p><strong>注意：</strong>使用clear清除浮动，不是BFC的效果。因为我们可以直接对父元素使用clear发现并不会撑开盒子，所以并没有产生BFC。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=&quot;zh&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">  &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">  &lt;style&gt;</span><br><span class="line">    .f &#123;</span><br><span class="line">      display: flow-root;</span><br><span class="line">      background-color: red;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .c &#123;</span><br><span class="line">      /*float: left;*/</span><br><span class="line">      height: 100px;</span><br><span class="line">      width: 200px;</span><br><span class="line">      background-color: blue;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    .cc &#123;</span><br><span class="line">      float: left;</span><br><span class="line">      height: 300px;</span><br><span class="line">      width: 100px;</span><br><span class="line">      background-color: black;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/style&gt;</span><br><span class="line"></span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div class=&quot;f&quot;&gt;</span><br><span class="line">  &lt;div class=&quot;c&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;cc&quot;&gt;&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<p>结果</p>
<img src="/.io//image-20211022110540794.png" alt="image-20211022110540794" style="zoom:33%;">







<p>注意点：如果设置了高度，那么父元素则不会进行扩张。</p>
<p>以及对一个元素的 before和 after伪类进行了 BFC ，并不会将 BFC 给到该元素上。</p>
<h3 id="两栏布局"><a href="#两栏布局" class="headerlink" title="两栏布局"></a>两栏布局</h3><p>就是，先指定一个的宽度，然后令其浮动，此时第二个的盒子将会位于第一个下面，然后，在将第二个盒子设置成一个BFC，所以就会出现他们并排一行，并且第二个盒子不会换行，然后因为默认占比的100%宽度，所以就会有一个自适应的效果。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=&quot;zh&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">  &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">  &lt;style&gt;</span><br><span class="line">    .left &#123;</span><br><span class="line">      float: left;</span><br><span class="line">      height: 100px;</span><br><span class="line">      width: 200px;</span><br><span class="line">      background-color: red;</span><br><span class="line">    &#125;</span><br><span class="line">    .right &#123;</span><br><span class="line">      overflow: hidden;</span><br><span class="line">      height: 300px;</span><br><span class="line">      background-color: blue;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div class=&quot;left&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;div class=&quot;right&quot;&gt;&lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>



<img src="/.io//image-20211022161542404.png" alt="image-20211022161542404" style="zoom:33%;">


    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/HTML/" rel="tag"># HTML</a>
              <a href="/tags/BFC/" rel="tag"># BFC</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2021/10/20/CSS/%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6/" rel="prev" title="外边距合并">
                  <i class="fa fa-chevron-left"></i> 外边距合并
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2021/10/22/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5/" rel="next" title="浏览器缓存策略">
                  浏览器缓存策略 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">tallgy</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  





  





</body>
</html>
